<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作用域插槽</title>
  <script src="../static/vue.js"></script>
</head>
<body>
<div id="root">
  <child>
    <template slot-scope="props">
      <li>{{props.item}}</li>
    </template>
  </child>
</div>
<script>

  Vue.component('child', {
    template: '<div>' +
      '<ul>' +
      '<slot v-for="item of list" :item=item></slot>' +
      '</ul>' +
      '</div>',
    data: function () {
      return {
        list: [1, 2, 3, 4]
      }
    }
  })
  var vm = new Vue({
    el: '#root'
  })
</script>
</body>
</html>
